// 省市管理页面
<template>
  <div class="app-container">
    <div class="cbox">
      <el-form
        :model="compForm"
        label-width="9rem"
        ref="compForm"
        size="mini"
        :rules="compFormRules"
      >
        <el-row>
          <el-col :span="4">
            <el-form-item label="中文名称：" prop="cName">
              <el-input  clearable maxlength="16" v-model="compForm.cName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label-width="2rem">
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row :gutter="10" class="btn-area">
      <el-col :span="24">
        <el-button size="mini" type="success" plain @click="add"
          >新增省</el-button
        >
        <el-button size="mini" type="primary" plain @click="edit"
          >编辑省</el-button
        >
        <el-button size="mini" type="danger" plain @click="del"
          >删除省</el-button
        >
      </el-col>
    </el-row>
    <div class="table">
      <div class="inner" ref="inner">
        <el-table
          :data="compList"
          :highlight-current-row="true"
          @row-click="getCurrentRow"
          @row-dblclick="storageDetail()"
          border
          :header-cell-style="{
            textAlign: 'center'
          }"
          :height="maxHeight"
        >
          <el-table-column size="mini"  align="center" label="序号" type="index"  :index="indexMethod" show-overflow-tooltip  width="60" ></el-table-column>
          <el-table-column size="mini"  align="left" label="国家名称"  prop="ctyCname" show-overflow-tooltip></el-table-column>
          <el-table-column size="mini" align="left" label="省代码"  prop="prvCode" show-overflow-tooltip ></el-table-column>
          <el-table-column size="mini" align="left"  label="中文名称"  prop="prvChnname" show-overflow-tooltip ></el-table-column>
          <el-table-column size="mini" align="left" label="英文名称" prop="prvEgsname"  show-overflow-tooltip ></el-table-column>
           <el-table-column size="mini" align="left"  label="简称代码"  prop="prvShrcode" show-overflow-tooltip ></el-table-column>
          <el-table-column size="mini" align="left" label="简称中文" prop="prvShrchn"  show-overflow-tooltip ></el-table-column>
          <el-table-column size="mini" align="left" label="创建员工" prop="prvInsertuser" show-overflow-tooltip ></el-table-column>
          <el-table-column size="mini" align="center"  label="创建时间"  prop="pvInsertdt" show-overflow-tooltip ></el-table-column>
          <el-table-column size="mini" align="left"  label="最后修改员工" prop="prvLstupduser" show-overflow-tooltip ></el-table-column>
          <el-table-column size="mini" align="center" label="最后修改时间" prop="prvLstupddt" show-overflow-tooltip ></el-table-column>
        </el-table>
      </div>
    </div>

    <el-pagination
      class="pagination"
      small
      background
      ref="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total"
    ></el-pagination>

    <el-dialog
      v-el-drag-dialog
      ref="dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
      v-if="showDialog"
      :title="operate"
      :before-close="handleClose">
      <el-form
        :model="dialogForm"
        ref="dialogForm"
        label-width="10rem"
        size="mini"
        :rules="dialogFormRules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item  label="国家名称：" prop="prvCtycd" >
              <el-select  v-model="dialogForm.prvCtycd" filterable clearable :disabled="messageDisabled">
                <el-option
                  v-for="i in GJList"
                  :key="i.ctyCd"
                  :label="i.ctyCname"
                  :title="i.ctyCname"
                  :value="i.ctyCd"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省市代码：" prop="prvCode">
              <el-input minlength="1" maxlength="6" clearable v-model="dialogForm.prvCode" @change="uppercase('prvCode')"  :disabled="accountDisabled" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="中文名称：" prop="prvChnname" >
              <el-input minlength="1"  maxlength="16" clearable :disabled="messageDisabled" v-model="dialogForm.prvChnname" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文名称："  prop="prvEgsname" >
              <el-input minlength="1" maxlength="16"  clearable :disabled="messageDisabled" v-model="dialogForm.prvEgsname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="简称代码：" prop="prvShrcode">
              <el-input  minlength="1" maxlength="2" clearable :disabled="messageDisabled" @change="uppercaseA('prvShrcode')"  v-model="dialogForm.prvShrcode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="简称中文：" prop="prvShrchn" >
              <el-input  minlength="1" maxlength="16" clearable :disabled="messageDisabled" v-model="dialogForm.prvShrchn"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="prvRemark" label="备注：">
              <el-input maxlength="32" type="textarea" :disabled="messageDisabled" v-model="dialogForm.prvRemark" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  size="mini"  v-if="messageDisabled == false"  @click="save"  type="primary" >保存</el-button>
        <el-button size="mini" @click="close('dialogForm')">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPCList, addPC, editPC, delPC ,provinceCityGj} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'

export default {
  name: 'router.provinceCity',
  mixins: [resizeMixin, paginationMixin],
  data() {
    return {
      dialogFormStatus: '', //dialog 中 form 的状态 add/edit
      accountDisabled: true,
      messageDisabled: false,
      currentData: {},
      showDialog: false,
      isChange: '',
      maxHeight: -1,
      operate: '',
      countryList: '',
      compForm: {
        cName: ''
      },
      compFormRules: {
        cName: [
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '请输入中文汉字',
            trigger: 'change'
          }
        ]
      },
      dialogForm: {},
      dialogFormRules: {
        prvShrchn:[
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '请输入中文',
            trigger: 'blur'
          }
        ],

        prvCtycd: [
          {
            required: true,
            message: '国家名称不能为空',
            trigger: 'change'
          }
        ],
        prvChnname: [
          {
            required: true,
            message: '中文名称不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '请输入中文',
            trigger: 'blur'
          }
        ],
        prvEgsname: [
          {
            required: true,
            message: '英文名称不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z ]+$/,
            message: '请输入英文',
            trigger: 'blur'
          }
        ],
        prvCode: [
          {
            required: true,
            message: '省市代码不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: '请输入英文和数字',
            trigger: 'blur'
          }
        ]
      },
      compList: [],
      GJList:[],
      GJListA:[]
    }
  },
  // computed: {
  //   grandson() {
  //     var dataList = []
  //     var number
  //     var arr = this.$route.path.split('/')
  //     number = arr.length - 1
  //     dataList = this.$store.state.user.permList
  //     for (var i = 0; i < dataList.length; i++) {
  //       for (var f = 0; f < dataList[i].Children.length; f++) {
  //         if (dataList[i].Children[f].MDL_CODE == arr[number]) {
  //           return dataList[i].Children[f].Grandson
  //         }
  //       }
  //     }
  //     return []
  //   }
  // },
  mounted() {
    this.refreshList()
    this.GjData()
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  methods: {
    //国家下拉框
    GjData(){
      this.GJList = []
      provinceCityGj({
        ctyCd:'',
        ctyCname:'',
        ctyEname:'',
      }).then(res =>{
        this.GJListA = res.data.FTKJWLHYPT
        let box = []
        for(let  i=0; i< this.GJListA.length; i++ ){
          if(this.GJListA[i].ctyIsvalid == 'Y'){
            box.push(this.GJListA[i])
            // this.GJList.push(this.GJListA)
            // console.log(this.GJList)
          }
        }
        this.GJList=box

      })
    },
    // checkCode() {
    //   this.compForm.cName = this.compForm.cName.replace(/[^\u4e00-\u9fa5]/g, '')
    // },
    uppercase(key) {
      this.dialogForm[key] = this.dialogForm[key].toUpperCase()
    },
    uppercaseA(key) {
      this.dialogForm[key] = this.dialogForm[key].toUpperCase()
    },
    trimECode() {
      this.dialogForm.PRV_EGSNAME = this.dialogForm.PRV_EGSNAME.trim()
    },
    // 点击查询
    search() {
      this.refreshList()
    },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      getPCList({
        prvChnname: this.compForm.cName,
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.compList = response.data
        updateTotal(Number(response.total))
      })
    },
    // 新增
    add() {
      this.showDialog = true
      this.isChange = ''
      this.operate = '新增省信息'
      this.accountDisabled = false
      this.messageDisabled = false
      this.dialogFormStatus = 'add'
      if (this.$refs['dialogForm']) {
        this.$refs['dialogForm'].resetFields()
      }
      this.resetDialogForm()
    },
    // 编辑
    edit() {
      this.dialogFormStatus = 'edit'
      this.isChange = false
      if (Object.keys(this.currentData).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.showDialog = true
      this.operate = '编辑省信息'
      this.accountDisabled = true
      this.messageDisabled = false
      this.dialogForm = Object.assign({}, this.currentData)
      if (this.$refs['dialogForm']) {
        this.$refs['dialogForm'].resetFields()
      }

    },
    // 删除
    del() {
      if (Object.keys(this.currentData).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }

      this.$confirm('您确认要删除此数据吗?', '提示', {
        closeOnClickModal: false
      })
        .then(() => {
          delPC(this.currentData).then(() => {
            this.$message.success({
              message: '删除成功！',
              showClose: true
            })
            this.refreshList()
          })
        }).catch(() => {})
    },
    //点击保存
    save() {
      // this.trimECode()
      if (this.dialogFormStatus === 'add') {
        this.commitAdd('dialogForm')
      } else if (this.dialogFormStatus === 'edit') {
        this.commitEdit('dialogForm')
      }
    },
    commitAdd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addPC(this.dialogForm).then(() => {
            this.$message.success({
              message: '新增数据成功！',
              showClose: true
            })
            this.showDialog = false
            this.refreshList()
          })
        }
      })
    },
    //点击编辑
    commitEdit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          editPC(this.dialogForm).then(() => {
            this.$message.success({
              message: '编辑数据成功！',
              showClose: true
            })
            this.showDialog = false
            this.refreshList()
          })
        }
      })
    },
    //关闭弹出框
    close(formName) {
      this.$refs[formName].resetFields()
      this.showDialog = false
    },
    //新增初始数据
    resetDialogForm() {
      this.dialogForm = {
        prvCtycd:'',//国家名称
        prvCode: '', // 省市代码
        prvChnname: '', // 中文名称
        // ctyCname: '',

        prvEgsname: '', //英文名称
        prvShrcode: '', //简称代码
        prvShrchn: '', //简称中文
        prvRemark: '' //备注
      }
    },
    // 获取当前选中行
    getCurrentRow(row) {
      this.currentData = row
    },
    //双击查看
    storageDetail() {
      this.showDialog = true
      this.isChange = ''
      this.operate = '查看省信息'
      this.accountDisabled = true
      this.messageDisabled = true
      this.dialogForm = Object.assign({}, this.currentData)
    },
    // handleClose(done) {
    //   if (this.$refs.dialogForm) {
    //     this.$refs.dialogForm.resetFields()
    //     done()
    //   }
    // },
    // getChanges() {
    //   var lists = []
    //   for (let i of this.countryList) {
    //     lists.push(i.UUID)
    //   }
    //   if (lists.indexOf(this.dialogForm.PRV_CTY_UUID) !== -1) {
    //     return
    //   } else {
    //     this.isChange = this.dialogForm.PRV_CTY_UUID
    //     console.log('s')
    //     this.$set(
    //       this.dialogForm,
    //       'PRV_CTY_UUID',
    //       this.dialogForm.PRV_CTY_CNAME
    //     )
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}

.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .table {
    flex: 1;
    position: relative;
    overflow: hidden;

    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
